<template>
	<view class="">



		<!-- 返回和标题 -->


		<view class="content">
			<!-- 积分数以及积分提现 -->
			<view class="f1">
				<text>{{user.integral}}
					<text
						style="font-size: 10rpx; margin-left: 20rpx; background-color: #2196F3; border-radius: 40%;">积分</text>
				</text>
				<view class="tixian" @click="goto('/pages/rewards/rewards')">
					申请提现
				</view>
			</view>

			<!-- 分段器 积分明细 积分收入 积分支出 -->
			<view class="f2">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#4cd964"></uni-segmented-control>
				<view class="content">
					<view v-show="current === 0">
						<!-- 显示积分明细 -->
						<view v-for="detail in pointDetails" :key="detail.id">
							<!-- 在这里显示积分明细的内容，根据具体数据结构进行展示 -->
							{{ detail }}
						</view>
					</view>
					<view v-show="current === 1">
						<!-- 显示积分收入 -->
						<view v-for="income in pointIncome" :key="income.id">
							<!-- 在这里显示积分收入的内容，根据具体数据结构进行展示 -->
							{{ income }}
						</view>
					</view>
					<view v-show="current === 2">
						<!-- 显示积分支出 -->
						<view v-for="expense in pointExpense" :key="expense.id">
							<!-- 在这里显示积分支出的内容，根据具体数据结构进行展示 -->
							{{ expense }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '我的积分',
				items: ['积分明细', '积分收入', '积分支出'],
				current: 0,
				pointDetails: [], // 存储积分明细数据
				pointIncome: [], // 存储积分收入数据
				pointExpense: [], // 存储积分支出数据
				user: {},
			}
		},
		mounted() {
			this.user = uni.getStorageSync('user');
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			goToBack() {
				uni.navigateTo({
					url: '/pages/invite/mine/mine'
				})
			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	//顶部标题
	.content-title {
		background-color: #fff;
		color: #000;
		font-weight: bold;
		height: 100rpx;
		position: relative;
		font-size: 16px;

		.title-left {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.title-right {
			text-align: center;
			line-height: 100rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.f1 {
		width: 100%;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 100rpx;
		color: #f8f8f8;
		background-color: #6FCF97;

		.tixian {
			width: 145rpx;
			margin-top: 20rpx;
			font-size: $uni-font-size-base;
			color: #f8f8f8;
			border-radius: 40rpx;
			border: 1px solid #f8f8f8;
			padding: 10rpx;
		}
	}

	.f2 {
		width: 100%;
	}
</style>